<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <div class="per-top">
            <span class="per-edit" id="edit-personal"></span>
            <img src="images/big-default-avatar.png" class="per-avatar">
            <p class="per-name">王思聪</p>

            <div class="me-income flex-box">
                <div class="flex" style="border-right: 1px solid #ff8162">
                    <h3 class="per-num">24</h3>
                    <p class="per-top-text">已接单</p>
                </div>
                <div class="flex all-profit">
                    <h3 class="per-num">4768.0</h3>
                    <p class="per-top-text">总收益（元）</p>
                </div>
            </div>
        </div>

        <div class="per-list-box">
            <ul class="mui-table-view per-box">
                <li class="mui-table-view-cell">
                    <a id="my_order">
                        <span class="per-list-icon per-order-icon fl"></span>
                        <div class="fl">
                            <div class="mui-navigate-right per-item">我的订单</div>
                        </div>

                        <span class="mui-badge per-badge">2</span>
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a id="my_message">
                        <span class="per-list-icon per-mes-icon fl"></span>
                        <div class="fl">
                            <div class="mui-navigate-right per-item">我的通知</div>
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a id="system_settings">
                        <span class="per-list-icon per-setting-icon fl"></span>
                        <div class="fl">
                            <div class="mui-navigate-right per-item">系统设置</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="nav-clear"></div>
    <nav class="mui-bar mui-bar-tab nav-box" id="nav">
        <a class="nav-list" id="mission_hall" data-id="1">
            <span class="nav-icon nav-icon1"></span>
            <span class="nav-tab-label">任务大厅</span>
        </a>
        <a class="nav-list" id="personal" data-id="2">
            <span class="nav-icon nav-icon2"></span>
            <span class="nav-tab-label">我的</span>
        </a>
    </nav>

    <script type="text/javascript">
			$(function() {
				mui.plusReady(function(){
					heightLight('2');
			    	mui('#nav').on('tap', '#mission_hall', ()=> {
			    		plus.webview.getWebviewById('mission_hall').show();
			    		plus.webview.getWebviewById("personal").hide();
			    	});
			    	
			    	mui('#nav').on('tap', '#personal', ()=> {
				    	plus.webview.getWebviewById("personal").show();
				    	plus.webview.getWebviewById("mission_hall").hide();
			    	});
			    	
			    	mui('.mui-table-view-cell').on('tap', '#my_order', ()=> {
			    		mui.openWindow({
							url: 'my-order.html',
							id: 'my-order.html'
						});
			    	});
			    	
			    	mui('.mui-table-view-cell').on('tap', '#my_message', ()=> {
			    		mui.openWindow({
							url: 'my-message.html',
							id: 'my-message.html'
						});
			    	});
			    	
			    	mui('.mui-table-view-cell').on('tap', '#system_settings', ()=> {
			    		mui.openWindow({
							url: 'system-settings.html',
							id: 'system-settings.html'
						});
			    	});
			    	
			    	mui('.per-top').on('tap', '#edit-personal', ()=> {
			    		mui.openWindow({
							url: 'edit-personal.html',
							id: 'edit-personal.html'
						});
			    	});
			    	
			    	mui('.me-income').on('tap', '.all-profit', ()=> {
			    		mui.openWindow({
							url: 'my-profit.html',
							id: 'my-profit.html'
						});
			    	})
			   })
			})
		</script>
</body>
</html>
